<template>
  <div class="orders">
    <div class="page-header">
      <h2>订单管理</h2>
      <button class="btn" @click="showAddOrder = true">添加订单</button>
    </div>

    <div class="card">
      <table class="table">
        <thead>
          <tr>
            <th>订单号</th>
            <th>客户姓名</th>
            <th>商品</th>
            <th>数量</th>
            <th>总金额</th>
            <th>订单状态</th>
            <th>支付状态</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="order in orders" :key="order.id">
            <td>{{ order.orderNumber }}</td>
            <td>{{ order.customerName }}</td>
            <td>{{ order.productName }}</td>
            <td>{{ order.quantity }}</td>
            <td>¥{{ order.totalAmount }}</td>
            <td>
              <span :class="['status', order.orderStatus]">
                {{ getOrderStatusText(order.orderStatus) }}
              </span>
            </td>
            <td>
              <span :class="['status', order.paymentStatus]">
                {{ getPaymentStatusText(order.paymentStatus) }}
              </span>
            </td>
            <td>{{ order.createdAt }}</td>
            <td>
              <button class="btn" @click="editOrder(order)">编辑</button>
              <button class="btn btn-danger" @click="deleteOrder(order.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加/编辑订单弹窗 -->
    <div v-if="showAddOrder || editingOrder" class="modal-overlay" @click="closeModal">
      <div class="modal" @click.stop>
        <h3>{{ editingOrder ? '编辑订单' : '添加订单' }}</h3>
        <form @submit.prevent="saveOrder">
          <div class="form-group">
            <label>客户姓名</label>
            <input 
              type="text" 
              class="form-control" 
              v-model="orderForm.customerName" 
              required
            />
          </div>
          <div class="form-group">
            <label>商品</label>
            <select class="form-control" v-model="orderForm.productName" required>
              <option value="">请选择商品</option>
              <option value="iPhone 15 Pro">iPhone 15 Pro</option>
              <option value="MacBook Air M2">MacBook Air M2</option>
              <option value="Nike运动鞋">Nike运动鞋</option>
            </select>
          </div>
          <div class="form-group">
            <label>数量</label>
            <input 
              type="number" 
              class="form-control" 
              v-model="orderForm.quantity" 
              min="1"
              required
            />
          </div>
          <div class="form-group">
            <label>订单状态</label>
            <select class="form-control" v-model="orderForm.orderStatus">
              <option value="pending">待处理</option>
              <option value="processing">处理中</option>
              <option value="shipped">已发货</option>
              <option value="delivered">已送达</option>
              <option value="cancelled">已取消</option>
            </select>
          </div>
          <div class="form-group">
            <label>支付状态</label>
            <select class="form-control" v-model="orderForm.paymentStatus">
              <option value="pending">待支付</option>
              <option value="paid">已支付</option>
              <option value="refunded">已退款</option>
            </select>
          </div>
          <div class="form-group">
            <label>收货地址</label>
            <textarea 
              class="form-control" 
              v-model="orderForm.shippingAddress"
              rows="3"
            ></textarea>
          </div>
          <div class="form-actions">
            <button type="button" class="btn" @click="closeModal">取消</button>
            <button type="submit" class="btn">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Orders',
  data() {
    return {
      orders: [
        {
          id: 1,
          orderNumber: 'ORD-2023-001',
          customerName: '张三',
          productName: 'iPhone 15 Pro',
          quantity: 1,
          totalAmount: 7999.00,
          orderStatus: 'shipped',
          paymentStatus: 'paid',
          shippingAddress: '北京市朝阳区xxx街道xxx号',
          createdAt: '2023-10-15'
        },
        {
          id: 2,
          orderNumber: 'ORD-2023-002',
          customerName: '李四',
          productName: 'MacBook Air M2',
          quantity: 1,
          totalAmount: 8999.00,
          orderStatus: 'processing',
          paymentStatus: 'paid',
          shippingAddress: '上海市浦东新区xxx路xxx号',
          createdAt: '2023-10-14'
        },
        {
          id: 3,
          orderNumber: 'ORD-2023-003',
          customerName: '王五',
          productName: 'Nike运动鞋',
          quantity: 2,
          totalAmount: 1198.00,
          orderStatus: 'pending',
          paymentStatus: 'pending',
          shippingAddress: '广州市天河区xxx路xxx号',
          createdAt: '2023-10-13'
        }
      ],
      showAddOrder: false,
      editingOrder: null,
      orderForm: {
        customerName: '',
        productName: '',
        quantity: '',
        orderStatus: 'pending',
        paymentStatus: 'pending',
        shippingAddress: ''
      }
    }
  },
  methods: {
    getOrderStatusText(status) {
      const statusMap = {
        pending: '待处理',
        processing: '处理中',
        shipped: '已发货',
        delivered: '已送达',
        cancelled: '已取消'
      }
      return statusMap[status] || status
    },
    getPaymentStatusText(status) {
      const statusMap = {
        pending: '待支付',
        paid: '已支付',
        refunded: '已退款'
      }
      return statusMap[status] || status
    },
    editOrder(order) {
      this.editingOrder = order
      this.orderForm = { ...order }
    },
    deleteOrder(id) {
      if (confirm('确定要删除这个订单吗？')) {
        this.orders = this.orders.filter(order => order.id !== id)
      }
    },
    saveOrder() {
      if (this.editingOrder) {
        // 编辑订单
        const index = this.orders.findIndex(o => o.id === this.editingOrder.id)
        this.orders[index] = { ...this.editingOrder, ...this.orderForm }
      } else {
        // 添加订单
        const newOrder = {
          id: this.orders.length + 1,
          orderNumber: `ORD-2023-${String(this.orders.length + 1).padStart(3, '0')}`,
          ...this.orderForm,
          totalAmount: this.calculateTotal(),
          createdAt: new Date().toISOString().split('T')[0]
        }
        this.orders.push(newOrder)
      }
      this.closeModal()
    },
    calculateTotal() {
      // 简单的价格计算逻辑
      const prices = {
        'iPhone 15 Pro': 7999.00,
        'MacBook Air M2': 8999.00,
        'Nike运动鞋': 599.00
      }
      return (prices[this.orderForm.productName] || 0) * this.orderForm.quantity
    },
    closeModal() {
      this.showAddOrder = false
      this.editingOrder = null
      this.orderForm = {
        customerName: '',
        productName: '',
        quantity: '',
        orderStatus: 'pending',
        paymentStatus: 'pending',
        shippingAddress: ''
      }
    }
  }
}
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #2c3e50;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status.pending {
  background: #fff3cd;
  color: #856404;
}

.status.processing {
  background: #cce5ff;
  color: #004085;
}

.status.shipped {
  background: #d1ecf1;
  color: #0c5460;
}

.status.delivered {
  background: #d4edda;
  color: #155724;
}

.status.cancelled {
  background: #f8d7da;
  color: #721c24;
}

.status.paid {
  background: #d4edda;
  color: #155724;
}

.status.refunded {
  background: #f8d7da;
  color: #721c24;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  padding: 30px;
  border-radius: 8px;
  width: 500px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

.modal h3 {
  margin-bottom: 20px;
  color: #2c3e50;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
</style> 